<template>
  <div class="gallery">
    <div class="gallery__content">
      <div class="gallery__content__files">
        <galleryItem v-for="item in articleList" :key="item.id" :data="item" @delete="deleteArticle"
          @state="updateState" :serchTerm="props.serchTerm">
        </galleryItem>
      </div>
    </div>

    <div class="pagination" v-show="count / props.pageSize > 1">
      <yk-pagination size="m" :total="count" @change="changePage" :default-page-size="props.pageSize" />
    </div>
    <div class="empty" v-show="count === 0">
      <yk-empty description="瞅啥呢，没数据" type="secondary"></yk-empty>
    </div>
  </div>
</template>

<script setup lang="ts">
import galleryItem from './galleryItem.vue';
import { onMounted, watch } from 'vue';
import { useUserStore } from '@/stores/user';
import { useArticle } from '@/hooks/article';
const { getData, articleList, count, updateState, deleteArticle } = useArticle()
const userStore = useUserStore()
const props = defineProps({
  pageSize: {
    type: Number,
    default: 3
  },
  subsetId: {
    default: -1,
    type: [Number, String]
  },
  serchTerm: {
    default: '',
    type: String
  }
})

const request = {
  token: userStore.token,//用户token
  pageSize: props.pageSize,//单页条数；
  nowPage: 1,//当前页
  subsetId: props.subsetId,//分组
  serchTerm: props.serchTerm,//搜索词条
  count: true,
  classify: 1, // 分类，默认为0
}





// 分页查询
const changePage = (e: number) => {
  request.nowPage = e
  getData(request)
}

watch(
  props, () => {
    // 查询数据
    request.nowPage = 1; // 重置当前页
    request.subsetId = props.subsetId; // 更新分组ID
    request.serchTerm = props.serchTerm;

    getData(request);
  }
)

onMounted(() => {
  getData(request);

})
</script>

<style scoped lang="less">
.gallery {
  width: 100%;
  background: @bg-color-l;
  padding: 32px 24px 24px;
  border-radius: @radius-m;

  &__content {
    display: inline;

    &__files {
      display: grid;
      grid-template-columns: repeat(auto-fill, 238px);
      row-gap: 32px;
      column-gap: 24px;
      justify-content: center;
    }
  }

  .pagination {
    padding: @space-s 0 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
  }

  .empty {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
